<style>
  table {text-align:center;}
  thead tr{}
  tbody tr:nth-child(even){background:#F5F5F5;}
  tbody tr:nth-child(odd){background:#EECFA1;}
</style>
<template>
  <div>
      <div style="float: left; width: 100%">
        <div>上访人员总量:<span>{{totalNumber}}</span>人 &nbsp;&nbsp;&nbsp;&nbsp;
          在控总量:<span>{{underControlNum}}</span>人 &nbsp;&nbsp;&nbsp; 脱控总量:<span>{{outOfControlNum}}</span>人
        </div>
        <div style="margin-top: 5px">
          <a href="/upload-person"><Button >批量上传</Button> &nbsp;&nbsp; &nbsp;&nbsp;</a>
          <a href="/api/targetStaff/templateDownload"><Button>数据模版导出</Button></a>
          <a href="/api/targetStaff/targetStaffDataExport"><Button>人员数据导出</Button></a>
        </div>
         <div style="height:500px;border:1px solid;width:92%;overflow: scroll;margin-top:10px">
        <table style="width:100%;">
          <thead >
              <tr style="border-bottom: 1px solid #666666;height: 35px">

                <th>姓名</th>
                <th>手机号</th>
                <th>身份证号</th>
                <th>居住地址</th>
                <th>活动区域</th>
                <th>是否在控</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="val in updateAndQueryTargets">

                <td>{{val.name}}</td>
                <td>{{val.phone}}</td>
                <td>{{val.identityCard}}</td>
                <td>{{val.address}}</td>
                <td>{{val.activityArea}}</td>
                <td>
                  <div v-if="val.status==true">
                   在控
                  </div>
                  <div v-else>
                   脱控
                  </div>
                </td>
              </tr>
          </tbody>
        </table>
      </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      totalNumber: 10,
      underControlNum: 10,
      outOfControlNum: 10,
      updateAndQueryTargets: ''
    }
  },
  created () {
    var url = '/api/targetStaff/targetStaffCount'
    axios.get(url)
      .then(res => {
        if (res.data.success == true) {
          this.totalNumber = res.data.totalNumber
          this.underControlNum = res.data.underControlNum
          this.outOfControlNum = res.data.outOfControlNum
        } else {
          alert('目标人员数量查询失败:' + res.data.errMsg)
        }
      })
    var url = '/api/targetStaff/updateAndQueryTargets'
    axios.get(url)
      .then(res => {
        if (res.data.success == true) {
          this.updateAndQueryTargets = res.data.targetList
        } else {
          alert('目标人员数量查询失败:' + res.data.errMsg)
        }
      })
  },
  methods: {

  }
}
</script>

<style>

</style>
